<template>
  <div>
    <div>用户列表</div>
    <!-- <ul>
      <li v-for="item in list" :key="item.id"></li>
    </ul> -->
    <table>
      <tr>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td><button @click="gotoDetail(item.id)">详情</button></td>
      </tr>
    </table>
  </div>
</template>
<script>
// import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    //因为局部引入了才能直接使用 全局引入 要用this.$axios.get
    // axios.get("list.json").then((res) => {
    //   console.log(res);
    //   this.list = res.data.data;
    // });
    //进入页面请求初始的json数据
  },
  //这是一个生命周期函数 跟data同级 会自动执行 用来请求初始数据也就是进入页面请求数据
  methods: {
    gotoDetail(id) {
      this.$router.push({ path: "/index/detail", query: { id: id } });
    },
  },
};
</script>
